<template>
	<view class="coupon">
		<base-navbar back-color="#fff" title="优惠券"></base-navbar>

		<uni-segmented-control :style="'width:' + windowWidth + 'px'" :current="currentTab" :values="tabItems"
			:style-type="styleType" :active-color="themeColor.theme" @clickItem="changeStatus" />

		<view class="coupon-list" v-if="couponList.length > 0">
			<block v-for="(item,index) in couponList" :key="index">
				<view class="coupon-item" v-if="item.status == 0" @click="selectCoupon(item)">
					<view class="info">
						<!-- <view class="tips">记得先领卷再下单哟！</view> -->
						<view class="name">
							<uni-icons type="coupon"></uni-icons>
							<text class="value">{{item.coupon_name}}</text>
						</view>
						<view class="desc">无门槛消费 有效期{{item.lifespan}}</view>
					</view>
					<view class="status">
						<image class="img" src="/static/images/img-coupon-status-unused.png" mode="aspectFill"></image>
						<c-button size="mini" round type="error"
							@click="pageTabRoute('/pages/tabbar/index/index')">去使用</c-button>
					</view>
				</view>

				<view class="coupon-item unable" v-else-if="item.status == 1">
					<view class="info">
						<!-- <view class="tips">记得先领卷再下单哟！</view> -->
						<view class="name">
							<uni-icons type="coupon"></uni-icons>
							<text class="value">{{item.coupon_name}}</text>
						</view>
						<view class="desc">无门槛消费 有效期{{item.lifespan}}</view>
					</view>
					<view class="status">
						<image class="img" src="/static/images/img-coupon-status-used.png" mode="aspectFill"></image>
						<c-button size="mini" round type="info">已使用</c-button>
					</view>
				</view>

				<view class="coupon-item unable" v-else>
					<view class="info">
						<!-- <view class="tips">记得先领卷再下单哟！</view> -->
						<view class="name">
							<uni-icons type="coupon"></uni-icons>
							<text class="value">{{item.coupon_name}}</text>
						</view>
						<view class="desc">无门槛消费 有效期{{item.lifespan}}</view>
					</view>
					<view class="status">
						<image class="img" src="/static/images/img-coupon-status-expired.png" mode="aspectFill"></image>
						<c-button size="mini" ty round type="info">已过期</c-button>
					</view>
				</view>
			</block>
		</view>
		<view v-else>
			<c-empty icon-name="coupon" title="暂无优惠券"></c-empty>
		</view>
	</view>
</template>

<script setup>
	import request from '@/utils/request';
	import cache from '@/utils/cache';
	import checkLogin from '@/utils/login';
	import {
		ref,
		reactive,
		toRefs,
		inject,
		computed,
		onMounted,
	} from 'vue';
	import {
		onLoad,
		onShow,
		onPullDownRefresh,
		onReachBottom,
	} from '@dcloudio/uni-app';

	const state = reactive({
		themeColor: JSON.parse(cache.get('themeColor')),
		tabItems: ['未使用', '已使用', '已过期'],
		styleType: 'text',
		windowWidth: '390',
		couponList: "",
		currentTab: 0,
		isMore: false,
		store_id: 0,
		goods_id: 0,
		service_id: 0,
		operate: '',
		price: 0,
	});

	onLoad((opt) => {
		if (opt.hasOwnProperty('operate')) {
			state.operate = opt.operate;
		}
		if (opt.hasOwnProperty('store_id')) {
			state.store_id = opt.store_id;
		}
		if (opt.hasOwnProperty('goods_id')) {
			state.goods_id = opt.goods_id;
		}
		if (opt.hasOwnProperty('service_id')) {
			state.service_id = opt.service_id;
		}
		if (opt.hasOwnProperty('price')) {
			state.price = opt.price;
		}
		//登录过期自动登录
		if (!checkLogin()) {
			pageRoute('/pages/users/login/login');
		} else {
			getCouponList();
		}
	})

	onMounted(() => {
		// 获取当前系统的信息
		const sysInfo = uni.getSystemInfoSync();
		console.log("获取当前系统的信息", sysInfo);
		// 为 wh 窗口可用宽度动态赋值
		state.windowWidth = sysInfo.windowWidth;
		console.log("窗口可用宽度", state.windowWidth);
	});

	onPullDownRefresh((e) => {
		console.log("下拉刷新");
	});

	onReachBottom((e) => {
		console.log("上拉加载更多", state.isMore);
		if (state.isMore) {
			getCouponList();
		}
	});

	function getCouponList() {
		request.get('coupon/getList', {
			type: state.currentTab,
			operate: state.operate,
			store_id: state.store_id,
			goods_id: state.goods_id,
			service_id: state.service_id,
			price: state.price,
			skip: state.couponList.length,
			limit: 10,
		}).then(res => {
			console.log('优惠券列表', res);
			state.isMore = res.data.is_more;
			if (state.couponList.length == 0) {
				state.couponList = res.data.data;
			} else {
				state.couponList = state.couponList.concat(res.data.data);
			}
		})
	}

	function selectCoupon(item) {
		if (state.operate) {
			uni.$emit('select_coupon', {
				coupon_info: item
			})
			uni.navigateBack({
				delta: 1
			})
		}
	}

	function changeStatus(e) {
		console.log(e);
		state.currentTab = e.currentIndex;
		console.log("当前选中", state.currentTab);
		state.couponList = [];
		getCouponList();
	}

	function pageRoute(url) {
		uni.navigateTo({
			url
		});
	}

	function pageTabRoute(url) {
		uni.switchTab({
			url
		});
	}

	const {
		themeColor,
		tabItems,
		styleType,
		windowWidth,
		couponList,
		currentTab,
		isMore,
		store_id,
		goods_id,
		service_id,
		operate,
		price,
	} = toRefs(state);
</script>

<style lang="scss">
	.coupon {
		.coupon-list {
			padding: $margin-24;

			.coupon-item {
				@include f-between;
				overflow: hidden;
				height: 195rpx;
				margin-bottom: $margin-24;
				background-color: $bg-inverse-color;
				border-radius: $radius-12;

				.info {
					display: flex;
					flex-direction: column;
					flex: 1;
					height: 100%;
					padding: $margin-24;
					box-sizing: border-box;

					.name {
						display: flex;
						align-items: center;
						margin-top: $margin-8;

						.value {
							font-size: $font-36;
							color: $error-color;
							font-weight: bold;
						}
					}

					.desc {
						margin-top: $margin-24;
						font-size: $font-22;
						color: $tips-color;
						font-weight: 400;
					}
				}

				.status {
					@include f-center($direction: column);
					width: 192rpx;
					height: 100%;
					padding-left: $margin-16;
					background: url('~@/static/images/bg-coupon-status.png') no-repeat center / cover;
					box-sizing: border-box;

					.img {
						width: 128rpx;
						height: 100rpx;
					}

					:deep(.c-button) {
						margin-top: $margin-8;
					}
				}

				&.unable {
					filter: grayscale(1);
					opacity: 0.6;
				}
			}
		}
	}
</style>